<!--  -->
<template>
  <div class="">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-switch
        v-model="isShowColor"
        inactive-text="深色模式"
        @change="changeThemeColor()"
      >
      </el-switch>
      <el-switch
        v-model="isShowFlow"
        inactive-text="无障碍花纹"
        @change.passive="changeFlow()"
      >
      </el-switch>
       <el-switch
        v-model="isShowmode"
        :inactive-text="isShowmode?'Canvas渲染':'Svg渲染'"
        @change.passive="changemode()"
      >
      </el-switch>
      <div ref="echarts" style="width: 1200px; height: 500px" id="main"></div>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import * as echarts from "echarts";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      themeColor: "light",
      isShowFlow: false,
      isShowColor: false,
      echarts: "",
      isShowmode:false,
      mode:'canvas',
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initEcharts() {
      this.echarts = echarts.init(this.$refs.echarts, this.themeColor, {renderer: this.mode});
      let option = {
        aria: {
          enabled: true,
          decal: {
            show: this.isShowFlow,
          },
        },
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["华东", "华南", "华北", "西部", "其他"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "2021-5-21",
              "2021-5-22",
              "2021-5-23",
              "2021-5-24",
              "2021-5-25",
              "2021-5-26",
              "2021-5-27",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "华东",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "华南",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "华北",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "西部",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "其他",
            type: "line",
            stack: "总量",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      this.echarts.setOption(option);
    },
    changeThemeColor() {
        this.echarts.dispose()
        if(this.isShowColor){this.themeColor="dark"}
        else{this.themeColor="light"}
        this.initEcharts()
    },
    changeFlow() {
      var option = {
        aria: {
          enabled: true,
          decal: {
            show: this.isShowFlow,
          },
        },
      };
      this.echarts.setOption(option);
    },
    changemode(){
        this.echarts.dispose()
        if(this.isShowmode){this.mode="canvas"}
        else{this.mode="svg" }
        
        this.initEcharts()
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.themeColor);
    this.initEcharts();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  deactivated() {},
};
</script>
<style  scoped>
.el-switch{
    margin: 10px;
}
</style>